<template>
	<view class="">
		<view class="fs28">
			<view class="cfe4" v-if="code_show" @click="getCode">{{code_name}}</view>
			<view class="c6" v-else>{{num}}s</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			code_name: {
				default: () => '获取验证码'
			},
			phone: { //手机号
				default: ''
			}
		},
		components: {},
		data() {
			return {
				code_show: true,
				num: 59,
				setint: null, //定时器
			}
		},

		methods: {
			getCode() { //获取验证码
				if (!this.phone) {
					uni.$u.toast('请输入手机号')
				} else if (!/^(?:(?:\+|00)86)?1\d{10}$/.test(this.phone)) {
					uni.$u.toast('请输入正确手机号')
				} else {
					this.$u.debounce(this.getCodePost, 500)
				}
			},
			getCodePost() { //获取验证码接口
				this.code_show = false
				this.setint = setInterval(() => {
					this.num--
					if (this.num == 0) {
						clearInterval(this.setint)
						this.code_show = true
						this.num = 59
					}
				}, 1000)
				this.$api.getCode({
					mobile: this.mobile
				}).then(res => {
					if (res.code == this.status_code) {
						uni.$u.toast(res.msg)
					} else {
						uni.$u.toast(res.msg)
						clearInterval(this.setint)
						this.code_show = true
						this.num = 59
					}
				})
			},
		},
		beforeUnmount() { //组件卸载之前
			clearInterval(this.setint)
			this.code_show = true
			this.num = 59
		},
		computed: {

		},
		watch: {

		}
	}
</script>

<style lang="scss" scoped>

</style>